<template>
    <div class="head">
        <div class="songlist">

                    <nav class="nav1">
                        <div class="songtop">
                            <span class="span2">推荐歌单</span>
                        </div>
                        <br> <br>
                        <ul class="ul1">
                            <li v-for= "(item,index) in songlist" :key="index">
                                <img :src="item.picUrl" alt="">
                               <p> {{item.name}}</p>
                            </li>
                        </ul>
                        <br> <br>

                        <div class="songtop">
                            <br> <br>
                            <span class="span2">最新音乐</span>

                        </div>
                       <div   class="newmusci">    <newmusic></newmusic></div>

                        <ul class="ul2">
                            <li v-for= "(item,index) in songlist" :key="index">

<!--                                <img :src="item.picUrl" alt="">-->
<!--                                <p> {{item.name}}</p>-->
                            </li>
                        </ul>
                    </nav>



        </div>
    </div>
</template>
<script>
import newmusic from "./newmusic";
    export default {
        data() {
            return {
                active: 1,
                songlist:[]
            };
        },
        created() {
            this.axios.get("/music-api/personalized?limit=6").then((res) => {
                console.log(res);
                this.songlist = res.data.result
            })

        },
        components: {
            newmusic
        },

    };
</script>
<style lang="less" scoped>
    .ul1 li{
        width: 30%;
        height: 180px;
        box-sizing: border-box;
        margin-left: 11px;
        padding-left: 9px;
        /*border: red 1px solid;*/
        float: left;

    }
    .ul1 img{
        width: 120px;
        height: 120px;
        margin-top: 10px;

    }
    /deep/ .van-tab--active {
        color: orange;
    }
    /deep/.song{
        box-sizing: border-box;
        padding: 50px;
        cellcepading:10px;
    }
    /deep/.songtop{
        height: 22px;
        width: 100%;
    }
   .span2{
    border-left: 2px red solid;
        margin-left: 20px;
       margin-top: 36px;
       float: left;
        clear:both;
    }
    .newmusci{

        margin: 370px 0 0 50px;
    }
</style>
